import {defineComponent} from 'friendly-petite-vue'
import mini from 'mini'
import MiniGridHelper from 'MiniGridHelper'

type DownFlowEventHandler = (event: any) => void
type MiniGridHelperProps = {
    id: string,
    searchUrl: string,
    openSearchDialog: DownFlowEventHandler,
    doSearch: DownFlowEventHandler
}

export default defineComponent<MiniGridHelperProps>('MiniDatagrid', props => {
    const miniGridHelper = MiniGridHelper('')
    let openSearchDialog = null

    return {
        template: `
        <div v-once
            :id="id"
            class="mini-datagrid"
            :url=":searchUrl"
            sortField="rs.srcCdwbh9"
            sortOrder="asc"
            pageSize="20"
            sizeList="[20, 50,100]"
            showSortIcon="false"
            allowCellEdit="false"
            allowResizeColumn="true"
            allowCellSelect="false"
            multiSelect="false"
            editNextOnEnterKey="false"
            editNextRowCell="false">
            <div property="columns">
                <div type="indexcolumn" width="50"></div>
                <div name="srcCdwbh9" field="srcCdwbh9" headerAlign="center" align="center"
                    data-mgh-table="ccr" data-mgh-field="src_cdwbh9" data-mgh-def-operator="linclude">原客</div>
                <div name="dstCdwbh9" field="dstCdwbh9" headerAlign="center" align="center"
                    data-mgh-table="ccr" data-mgh-field="dst_cdwbh9" data-mgh-def-operator="linclude">新客</div>
                <div name="createdTime" field="createdTime" headerAlign="center" align="center"
                    data-mgh-table="ccr" data-mgh-field="created_time" data-mgh-def-operator="gte" renderer="handleRenderer">创建时间</div>
                <div name="modifiedTime" field="modifiedTime" headerAlign="center" align="center"
                    data-mgh-table="ccr" data-mgh-field="modified_time" data-mgh-def-operator="gte" renderer="handleRenderer">修改时间</div>
            </div>
        </div>
        `,
        data(){
            return {
                id: props.id,
                searchUrl: props.searchUrl
            }
        },
        mounted() {
            openSearchDialog = miniGridHelper.searchOn(this.id, {height: 400, width: 600})
            props.openSearchDialog(openSearchDialog)
	        props.doSearch(() => {
                this.$mini.get(`#${this.id}`).reload()
            })
        }
    }
})
